import React, {Component, PropTypes} from 'react'
import {Col, Tabs} from 'antd'
import Identity from '../../../../common/components/users/Identity'
import BasicInfo from '../../../../common/components/users/BasicInfo'
import TradeBankInfo from '../../../../common/components/users/TradeBankInfo'
import Profession from '../../../../common/components/users/Profession'
import Contact from '../../../../common/components/users/Contact'
import {fetchPost} from './../../../../../utils/request'

const TabPane = Tabs.TabPane;

class Info extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      userId: props.userId,
      tradeNo: props.tradeNo,
      stepType: props.stepType,
      processNode: props.processNode,
      zmData: {},
      id: props.id,
      message: '',
      item: props.item
    }
  }

  componentWillReceiveProps(props) {
    if (this.state.userId != props.userId || this.state.id != props.id) {
      this.setState({
        userId: props.userId,
        tradeNo: props.tradeNo,
        id: props.id,
        item: props.item
      }, () => {
        this.getData()
      })
    }
  }

  componentDidMount() {
    this.getData()
  }

  getData() {
    if (this.state.id) {
      fetchPost(`/user/${this.state.userId}/zm/info`).then(json => {
        if (json.data != null && json.code === 0) {
          this.setState({
            zmData: json.data
          })
        } else {
          this.setState({
            zmData: {},
            message: json.msg
          })
        }
      })
    } else {
      this.setState({
        zmData: {}
      })
    }
  }

  callback = (key) => {
    console.log(key);
  };

  render() {
    return (
      <div style={{overflow: 'hidden'}}>
        <div style={{height: '100%', overflow: 'auto'}}>
          {
            this.state.processNode == '1' ? null
              :
              <Col span={24}>
                <Identity userId={this.state.userId} tradeNo={this.state.tradeNo}/>
              </Col>
          }
          <Col span={24}>
            <Tabs onChange={this.callback} type="line">
              <TabPane tab="BASIC" key="1">
                <BasicInfo userId={this.state.userId} tradeNo={this.state.tradeNo} stepType={this.state.stepType}/>
              </TabPane>
              <TabPane tab="WORKING" key="2">
                <Profession orderId={this.state.id} userId={this.state.userId}/>
              </TabPane>
              {
                this.state.processNode == '1' ? null
                :
                  <TabPane tab="CONTACT" key="3">
                    <Contact id={this.state.id} userId={this.state.userId}/>
                  </TabPane>
              }
            </Tabs>
          </Col>
          <Col span={24}>
            <TradeBankInfo userId={this.state.userId} tradeNo={this.state.tradeNo}/>
          </Col>
        </div>
      </div>
    )
  }
}

export default Info
